<template>
  <div class="login-box">
    <div class="login-content">
      <!-- 登录 -->
      <div class="login-from" v-if="resigter == false">
        <h1>欢迎您，请登录！</h1>
        <p class="login-msg">{{ msg }}</p>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              type="text"
              v-model="ruleForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <br />
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <br />
          <el-form-item label="" prop="checked">
            <input type="checkbox" v-model="ruleForm.checked" />《同意用户协议》
          </el-form-item>
          <br />
          <el-form-item>
            <el-button
              v-if="loginFalg == false"
              type="primary"
              class="login-btn"
              @click="submitForm(this.$refs.ruleForm)"
              >登录</el-button
            >
            <el-button
              v-if="loginFalg == true"
              type="primary"
              class="login-btn"
              loading
              disabled
              >登录</el-button
            >
          </el-form-item>
        </el-form>
        <a
          href="#"
          @click="changeFrom()"
          style="position: absolute; top: 370px; right: 80px"
          >没有账号？去注册</a
        >
      </div>
      <!-- 注册 -->
      <div class="register-from" v-if="resigter == true">
        <h1>用户注册！</h1>
        <p class="login-msg">{{ msg }}</p>

        <el-form
          :model="resFrom"
          status-icon
          :rules="resrules"
          ref="resFrom"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              type="text"
              v-model="resFrom.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <br />
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="resFrom.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <br />
          <el-form-item label="请再次密码" prop="checkpass">
            <el-input
              type="password"
              v-model="resFrom.checkpass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <br />
          <br />
          <el-form-item label="验证码" prop="code">
            <input type="text" v-model="resFrom.code" class="code" />
            <img class="codeImg" :src="codeImg" />
            <a
              href="#"
              style="position: absolute; right: 20px; top: 50px; z-index: 10"
              @click="changecode()"
              >看不清？换一张</a
            >
          </el-form-item>
          <br />
          <el-form-item label="" prop="checked">
            <input type="checkbox" v-model="ruleForm.checked" />《同意用户协议》
          </el-form-item>
          <br />

          <el-form-item>
            <el-button
              type="primary"
              class="login-btn"
              @click="rsubmitForm(this.$refs.resFrom)"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
        <a
          href="#"
          @click="changeFrom()"
          style="position: absolute; top: 450px; right: 80px"
          >没有账号？去注册</a
        >
      </div>
    </div>
  </div>
</template>

<script>
import { login, resigter } from "../network/user";
import { ElMessage } from "element-plus";
export default {
  data() {
    var validateUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };

    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    var validateChecked = (rule, value, callback) => {
      value = this.ruleForm.checked;
      if (value == false) {
        callback(new Error("请勾选用户协议"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value != this.resFrom.password) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };
    var validateCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    return {
      loginFalg: false,
      codeImg: "http://localhost:8080/backstage/checkcode",
      resigter: false,
      msg: "",
      ruleForm: {
        username: "",
        password: "",
        checked: false,
      },
      resFrom: {
        username: "",
        password: "",
        checkpass: "",
        code: "",
        checked: false,
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],

        checked: [{ validator: validateChecked, trigger: "blur" }],
      },
      resrules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        checkpass: [{ validator: validatePass2, trigger: "blur" }],
        code: [{ validator: validateCode, trigger: "blur" }],
        checked: [{ validator: validateChecked, trigger: "blur" }],
      },
    };
  },
  methods: {
    changeFrom() {
      this.resigter = !this.resigter;
    },
    submitForm(e) {
      e.validate((valid) => {
        if (valid) {
          this.loginFalg = !this.loginFalg;
          login(this.ruleForm).then((res) => {
            if (res.data.status == 200) {
              //设置token
              window.localStorage.setItem("token", res.data.data);
              this.$store.commit("setIsLogin", true);
              //  store.

              setTimeout(() => {
                ElMessage.success("登录成功，欢迎来到后台系统");
                this.$router.push({ path: "/index" });
              }, 2000);
            }
          });
        } else {
          return false;
        }
      });
    },
    rsubmitForm(e) {
      e.validate((valid) => {
        if (valid) {
          resigter(this.resFrom).then((res) => {
            if (res.data.status == "401") {
              console.log(res);
              this.msg = res.data.msg;
              console.log(this.msg);
            } else {
              this.msg = res.data.msg;
              this.$router.push({ path: "/login" });
              this.resigter = !this.resigter;
            }
          });
        } else {
          return false;
        }
      });
    },
    changecode() {
      this.codeImg =
        "http://localhost:8080/backstage/checkcode?" +
        new Date().getMilliseconds();
    },
  },
};
</script>

<style  scoped>
* {
  margin: 0;
  padding: 0;
}
.login-box {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/img/bg.jpg");
}
.login-box > .login-content {
  width: 1190px;
  height: 100vh;
  position: relative;

  margin: 0 auto;
}
.login-from {
  border-radius: 10px;
  padding: 60px;
  background: rgb(216, 203, 203, 0.7);
  position: absolute;
  top: 300px;
  width: 480px;
  height: 300px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.demo-ruleForm {
  margin: 0px;
  width: 400px;
}
.login-btn {
  width: 300px;
  height: 30px;
  background: blue;
  color: #ffffff;
}
.login-from > h1 {
  margin-left: 30px;
  margin-bottom: 30px;
}
.login-msg {
  color: red;
  margin-bottom: 20px;
}
.register-from {
  border-radius: 10px;
  padding: 60px;
  background: rgb(216, 203, 203, 0.7);
  position: absolute;
  top: 300px;
  width: 480px;
  height: 400px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.code {
  width: 50%;
  height: 30px;
  border: none;
  outline: none;
  border-radius: 3px;
}
.codeImg {
  width: 120px;
  height: 50px;
  position: absolute;
  right: 20px;
}
</style>

